<template>
  <div style="max-width: 900px; margin: 0 auto">
    <div>
      <el-row class="detailRow">
        <el-col span="6" style="font-weight: bold">
          基本信息
        </el-col>
        <el-col span="8"
        >订单名称 : {{ basicInfo.offerName }}
        </el-col>
        <el-col span="8"
        >提交人 : {{ basicInfo.username }}
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row class="detailRow">
        <div style="display: flex">
          <div style="text-align: center; width: 20%">
            <div class="basicInfo_table_title"></div>
            <div class="basicInfo_table_title">图片</div>
            <div class="basicInfo_table_title">视频</div>
          </div>
          <div
            v-for="(item, index) in basicInfo.countInfo.platform"
            :key="index"
            :style="{
              width: 100 / (basicInfo.countInfo.platform.length + 1) + '%',
            }"
            style="text-align: center"
          >
            <div
              class="basicInfo_table_column"
              style="background-color: #fafafa; font-weight: 600"
            >
              {{ item }}
            </div>
            <div class="basicInfo_table_column">
              {{ basicInfo.countInfo.img[index] }}
            </div>
            <div class="basicInfo_table_column">
              {{ basicInfo.countInfo.vid[index] }}
            </div>
          </div>
        </div>
      </el-row>
      <el-row
        v-if="useType === 'add'"
        style="margin-left: 10%; margin-top: 20px"
      >
        <el-col
          span="12"
          style="display: flex; height: 28px; line-height: 28px"
          v-if="showAuditor"
        >
          <div style="width: 25%">内部审核人 :</div>
          <el-select
            id="id-offer-componets-reativeauditdetail-inside"
            style="margin-left: 5px; width: 60%"
            size="mini"
            filterable
            v-model="inside"
          >
            <el-option
              v-for="(item, index) in insideList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col span="12" offset="2" v-if="showAssessor">
          外部审核人: {{ basicInfo.customerName }}
        </el-col>
      </el-row>
      <el-row class="detailRow">
        <div>
          <span>已选素材</span>
          <span v-if="useType === 'edit'">
            <el-button
              id="id-offer-componets-reativeauditdetail-getAddCreative"
              style="margin-left: 20px"
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="getAddCreative"
            >添加审核素材</el-button
            >
          </span>
        </div>
        <div class="creative_border">
          <div
            v-for="(item, index) in creativeInfo"
            :key="index"
            class="creative_item"
            style="position: relative"
            :examineId="item.id"
          >
            <div class="create-url" style="margin-top: 10px">
              <cs-image
                :src="item.type == '0'?item.waterUrl:item.thumbnailUrl"
                @click="openCreativeDetail(item.type, item.waterUrl)"
              ></cs-image>
              <!--<img-->
              <!--  v-if="item.type == '0'"-->
              <!--  style="-->
              <!--    height: auto;-->
              <!--    width: 100%;-->
              <!--    max-height: 100%;-->
              <!--    max-width: 100%;-->
              <!--  "-->
              <!--  :src="item.waterUrl"-->
              <!--  @click="openCreativeDetail(item.type, item.waterUrl)"-->
              <!--/>-->
              <!--<video-->
              <!--  v-if="item.type == '1'"-->
              <!--  style="-->
              <!--    height: auto;-->
              <!--    width: 100%;-->
              <!--    max-height: 100%;-->
              <!--    max-width: 100%;-->
              <!--  "-->
              <!--  :src="item.waterUrl"-->
              <!--  @click="openCreativeDetail(item.type, item.waterUrl)"-->
              <!--&gt;</video>-->
            </div>
            <div class="create-detail">
              <div style="margin-top: 10px"><span style="font-weight: 500">设计者</span> : {{
                  designerChange(item.designer)
                }}
              </div>
              <div style="margin-top: 10px"><span style="font-weight: 500">媒体</span> : {{ item.platform }}</div>
              <div style="margin-top: 10px; white-space: pre-wrap"><span style="font-weight: 500">素材ID</span> : {{ item.shortId }}</div>
              <div style="margin-top: 10px; white-space: pre-wrap"><span style="font-weight: 500">设计思路</span> : {{ item.thought }}</div>
              <div v-if="useType === 'check'" style="margin-top: 10px">
                审核状态 : {{ changeStatus(item.status) }}
              </div>
            </div>
            <div
              v-if="useType === 'check' || useType === 'examine'"
              class="create-detail"
            >
              <div style="margin-top: 10px; margin-bottom: 5px"><span style="font-weight: 500">评论</span></div>
              <el-input
                id="id-offer-componets-reativeauditdetail-comments"
                :disabled="useType === 'check'"
                v-model="item.comments"
                size="mini"
                type="textarea"
              ></el-input>
            </div>
            <div
              v-if="useType === 'examine'"
              class="create-detail"
              :style="'width: 40%;' + ((useType === 'examine' && (item.status == 2 || item.status == 3))?'':'background-color: yellow;')"
            >
              <el-radio v-model="item.status" :label="2">同意</el-radio>
              <el-radio v-model="item.status" :label="3">拒绝</el-radio>
            </div>
            <el-button
              id="id-offer-componets-reativeauditdetail-delCreative"
              icon="el-icon-close"
              size="mini"
              circle
              v-if="useType !== 'check'"
              style="
                width: 30px;
                height: 30px;
                position: absolute;
                top: 3px;
                right: 0;
              "
              @click="delCreative(item.id)"
            ></el-button>
          </div>
        </div>
      </el-row>
      <el-row style="margin: 20px">
        <div
          style="margin: 0 auto"
          :style="{
            width:
              useType !== 'check' && useType !== 'examine' ? '150px' : '65px',
          }"
        >
          <el-button
            id="id-offer-componets-reativeauditdetail-submit"
            v-if="useType !== 'check'"
            type="primary"
            size="mini"
            @click="submit"
            :disabled="btnDisable"
          >提交
          </el-button>
          <el-button id="id-offer-componets-reativeauditdetail-close"
                     size="mini" @click="close" v-if="useType !== 'examine'"
          >取消
          </el-button
          >
        </div>
      </el-row>
    </div>
    <!--素材详细信息-->
    <el-dialog
      title="素材详细信息"
      :visible.sync="creativeDetail"
      width="60%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="handleDetailClose"
      :append-to-body="true"
      top="0px"
    >
      <div>
        <img
          v-show="detailType == '0'"
          :src="detailCreative"
          :style="previewStyle()"
        />
        <video
          v-show="detailType == '1'"
          ref="video"
          :src="detailCreative"
          :style="previewStyle()"
          controls="controls"
        ></video>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="addCreative"
      modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="handleAddCreativeClose"
      width="80%"
      :append-to-body="true"
    >
      <el-form style="display: flex" label-width="80px">
        <el-form-item label="名称">
          <el-input id="id-offer-componets-reativeauditdetail-name"
                    size="mini" v-model="dto.name"></el-input>
        </el-form-item>
        <el-form-item label="设计者">
          <el-select id="id-offer-componets-reativeauditdetail-designer"
                     size="mini" v-model="dto.designer" clearable>
            <el-option
              v-for="(item, index) in designerList"
              :key="index"
              :label="item.realName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button id="id-offer-componets-reativeauditdetail-searchForm"
                     size="mini" type="primary" @click="searchForm"
          >搜 索
          </el-button>
          <el-button id="id-offer-componets-reativeauditdetail-resetForm" size="mini" @click="resetForm">重 置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" select-on-indeterminate="true" :data="creativeList"
                @selection-change="handleSelectionChange" :row-key="getRowKeys" ref="multipleTable" border>
        <el-table-column type="selection" :reserve-selection="true" width="55"/>
        <el-table-column label="id" prop="id"/>
        <el-table-column label="名称" prop="name"/>
        <el-table-column label="媒体" prop="platform"/>
        <el-table-column label="类型" prop="type" width="55">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.type == '1'">视频</div>
              <div v-if="scope.row.type == '0'">图片</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="版本号" prop="version" width="65"/>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <div>
              {{ changeStatus(scope.row.status) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="素材" prop="creativeUrl">
          <template slot-scope="scope">
            <div>
              <img
                v-if="
                  scope.row.type == '0' &&
                  scope.row.creativeUrl !== '-1' &&
                  scope.row.creativeUrl !== '-2'
                "
                :src="scope.row.creativeUrl"
                style="width: 100%; height: 100%"
              />
              <video
                v-if="
                  scope.row.type == '1' &&
                  scope.row.creativeUrl !== '-1' &&
                  scope.row.creativeUrl !== '-2'
                "
                ref="video"
                :src="scope.row.creativeUrl"
                style="width: 100%; height: 100%"
                controls="controls"
              ></video>
              <div v-if="scope.row.creativeUrl == '-1'">上传中</div>
              <div v-if="scope.row.creativeUrl == '-2'">上传失败</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="标签" prop="tags"/>
        <el-table-column label="设计者" prop="designer">
          <template slot-scope="scope">
            {{ designerChange(scope.row.designer) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"/>
      </el-table>
      <el-col :span="24" class="toolbar" style="text-align: center">

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="getNextList"
          :current-page="currentPage4"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="addPage.total">
        </el-pagination>
      </el-col>

      <div slot="footer" class="dialog-footer">

        <el-button id="id-offer-componets-reativeauditdetail-submitForm" size="mini" type="primary"
                   style="margin-left: 10px" @click="submitForm"
        >确 定
        </el-button>
        <el-button id="id-offer-componets-reativeauditdetail-handleAddCreativeClose" size="mini"
                   @click="handleAddCreativeClose">取 消
        </el-button>
      </div>
    </el-dialog>

    <!--复制链接-->
    <el-dialog title="复制审核链接" width="60%" center :visible.sync="copyDialog" modal-append-to-body="false"
               :append-to-body="true" :close-on-click-modal="false">
      <div>
        <div id="link"> 链接 : {{ copyKeyUrl }}</div>
        <div style="width: 130px;margin: 0 auto;margin-top: 20px" slot="footer" class="dialog-footer">
          <el-button id="id-offer-componets-reativeauditdetail-copy" @click="copy" size="mini">复制链接</el-button>
          <el-button id="id-offer-componets-reativeauditdetail-closeCopyDialog" @click="closeCopyDialog" size="mini">取
            消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {

  viewCreative,
  examintCreative,
  addCreativeInfo,
  updataSubmit,
  examineView,
  examineMain,
  examineSubmit,
  copyLink,
} from "@/api/offer/creativeaudit";
import {getDesigner, examine} from "@/api/offer/creative";
import {mapGetters} from "vuex";
import CsImage from "@/components/CsImage/CsImage";

const statusList = [
  {label: "等待提交", value: 0},
  {label: "等待审核", value: 1},
  {label: "审核通过", value: 2},
  {label: "审核拒绝", value: 3},
  {label: "禁用", value: 4},
];
export default {
  name: "creativeAuditDetail",
  components: {
    CsImage
  },
  props: {
    useType: {
      type: String,
    },
    dataList: {
      type: Object,
    },
  },
  data() {
    return {
      showAuditor: false,
      showAssessor: false,
      btnDisable: false, //提交不可选
      designerList: [], //设计师列表
      tableData: [],
      inside: "", //内部审核人
      insideList: [], //内部审核人列表
      auditCreative: 0, //是否选择内部审核员
      basicInfo: {
        countInfo: {
          platform: [],
          img: [],
          vid: [],
        },
      },
      creativeInfo: [],
      creativeDetail: false,
      addCreative: false,
      loading: false,
      creativeList: [],
      detailCreative: "", //素材地址
      detailType: "", //素材类型
      dto: {
        name: null,
        designer: null,
        creativeIds: null,
        offerId: null,
      },
      addPage: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      addPage1: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },

      //复制链接
      copyDialog: false,
      copyKeyUrl: '',
      cilck: false,
      selectid: []
    };
  },


  computed: {
    ...mapGetters(["offer", "userInfo"]),
  },
  created() {

    if (this.useType === "examine") {
      this.examineMainInit();
    }
    if (this.useType !== "add" && this.useType !== "examine") {
      this.init();
    }

    if (this.useType === "add") {
      this.examineInit();
    }
    getDesigner().then((res) => {
      this.designerList = res.data.data;
    });
    this.dto.offerId = this.dataList.offerId;
  },
  methods: {
    handleSizeChange(list) {
      this.addPage.pageSize = list;
      examintCreative(page.pageNum, page.pageSize, Object.assign(params, this.dto)).then((res) => {
        this.loading = false;
        const data = res.data.data;
        this.addPage.total = data.total;
        this.creativeList = data.records;
      });
    },
    getRowKeys(row) {
      return row.id
    },
    handleSelectionChange(list) {
      for (let i = 0; i < list.length; i++) {
        this.selectid.push(list[i].id)
      }
    },
    previewStyle() {
      let height = ((window.innerHeight < 300) ? 300 : (window.innerHeight - 160));
      return {
        maxWidth: '100%',
        maxHeight: height + 'px'
      };
    },
    designerChange(val) {
      val = val.split(',')
      let list = []
      this.designerList.map(item => {
        val.map(i => {
          if (i === item.id) {
            list.push(item.realName)
          }
        })
      })
      return list.join(',')
    },
    auditPeople() {
      if (this.auditCreative == 0) {
        this.showAuditor = true;
      } else {
        this.showAssessor = true;
      }
    },
    examineMainInit() {
      let data = {
        listId: this.dataList.listId,
      };
      examineMain(data).then((res) => {
        this.basicInfo = res.data.data.basicInfo;
        this.insideList = res.data.data.basicInfo.auditorList;
        this.auditCreative = res.data.data.basicInfo.audit_creative;
        this.creativeInfo = res.data.data.creativeInfo;
        if (this.useType == 'examine' && this.creativeInfo != null) {
          //内部审核默认为同意
          this.creativeInfo.forEach(creative => {
            if (creative.status != 3) {
              creative.status = 2;
            }
          });
        }
        this.basicInfo["countInfo"] = {
          platform: [],
          img: [],
          vid: [],
        };
        this.dynamicNumber();
      });
    },
    examineInit() {
      let data = {
        offerId: this.dataList.offerId,
        creativeId: this.dataList.listId,
      };
      examineView(data).then((res) => {
        this.basicInfo = res.data.data.basicInfo;
        this.insideList = res.data.data.basicInfo.auditorList;
        this.auditCreative = res.data.data.basicInfo.auditCreative;
        this.creativeInfo = res.data.data.creativeInfo;
        this.basicInfo["countInfo"] = {
          platform: [],
          img: [],
          vid: [],
        };
        this.dynamicNumber();
        this.auditPeople();

        let invalidWaterUrlCreativeNameList = this.waterUrlDisabledNameList();
        if (invalidWaterUrlCreativeNameList.length > 0) {
          this.$message.warning("您所提审的素材正在生成水印。" + invalidWaterUrlCreativeNameList.join("，"))
        }
      });
    },
    waterUrlDisabledNameList() {
      let invalidWaterUrlCreativeNameList = [];
      this.creativeInfo.forEach(item => {
        if (!(item.waterUrl) || item.waterUrl == '-1') {
          invalidWaterUrlCreativeNameList.push(item.name);
        }
      });
      return invalidWaterUrlCreativeNameList;
    },
    init() {
      viewCreative(this.dataList.listId).then((res) => {
        this.basicInfo = res.data.data.basicInfo;
        this.creativeInfo = res.data.data.creativeInfo;
        this.basicInfo["countInfo"] = {
          platform: [],
          img: [],
          vid: [],
        };
        this.dynamicNumber();
      });
    },
    //打开详细素材
    openCreativeDetail(type, url) {
      this.creativeDetail = true;
      this.detailCreative = url;
      this.detailType = type;
    },

    //删除素材
    delCreative(val) {
      if (
        (this.useType === "examine" || this.useType === "add") &&
        this.creativeInfo.length === 1
      ) {
        return;
      }
      this.creativeInfo.splice(
        this.creativeInfo.findIndex((item) => item.id === val),
        1
      );
      this.dynamicNumber();
    },

    //关闭详细素材窗口
    handleDetailClose() {
      this.creativeDetail = false;
      this.$refs.video.pause();
    },
    //修改审核状态
    changeStatus(val) {
      let status;
      statusList.map((item) => {
        if (item.value === val) {
          status = item.label;
        }
      });
      return status;
    },
    //添加审核素材
    getAddCreative() {
      this.addCreative = true;
      let ids = [];
      this.creativeInfo.map((item) => {
        ids.push(item.id);
      });
      this.dto.creativeIds = ids.join(",");
      this.addPage = {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      };
      this.getAddExamintList(this.addPage)

    },

    getAddExamintList(page, params = {}) {
      this.loading = true

      examintCreative(page.pageNum, page.pageSize, Object.assign(params, this.dto)).then((res) => {
        this.loading = false;
        const data = res.data.data;
        this.addPage.total = data.total;
        this.creativeList = data.records;
      });

    },

    getNextList(val) {
      this.addPage.pageNum = val
      this.getAddExamintList(this.addPage)
    },

    //关闭新增素材页面
    handleAddCreativeClose() {
      this.$refs.multipleTable.clearSelection()
      this.dto.name = "";
      this.dto.designer = "";
      this.addCreative = false;
    },
    //搜索新增素材
    searchForm() {
      this.cilck = true
      this.getAddExamintList(this.addPage1)
    },
    //重置新增素材
    resetForm() {
      this.dto.name = "";
      this.dto.designer = "";
      this.getAddExamintList(this.addPage)
    },
    //提交新增
    submitForm() {
      let data = {
        creativeIds: this.selectid.join(","),
        auditId: this.dataList.listId,
      };
      addCreativeInfo(data).then((res) => {
        if (res.data.success) {
          this.creativeInfo = [...this.creativeInfo, ...res.data.data];
          this.dynamicNumber();
          this.handleAddCreativeClose();
        }
      });
    },

    //动态获取图片视频数量
    dynamicNumber() {
      this.basicInfo.countInfo = {
        platform: [],
        vid: [],
        img: [],
      };
      this.creativeInfo.map((item) => {
        if (this.basicInfo.countInfo.platform.indexOf(item.platform) === -1) {
          this.basicInfo.countInfo.platform.push(item.platform);
        }
      });
      this.basicInfo.countInfo.platform.map((i) => {
        let vidLength = 0;
        let imgLength = 0;
        this.creativeInfo.map((item) => {
          if (i === item.platform) {
            if (item.type == 1) {
              vidLength++;
            }
            if (item.type == 0) {
              imgLength++;
            }
          }
        });
        this.basicInfo.countInfo.vid.push(vidLength);
        this.basicInfo.countInfo.img.push(imgLength);
      });
    },
    close() {
      this.$parent.handleClose();
    },
    //提交表单
    submit() {
      // 编辑提交
      switch (this.useType) {
        case "edit": {
          let list = [];
          this.creativeInfo.map((item) => {
            list.push(item.id);
          });
          let data = {
            creativeIds: list.join(","),
            listId: this.dataList.listId,
          };
          this.btnDisable = true;
          updataSubmit(data).then((res) => {
            if (res.data.success) {
              this.btnDisable = false;
              this.$message({
                type: "success",
                message: "提交成功",
              });
              this.close();
            }
          }, (error) => {
            if (error) {
              this.btnDisable = false
            }
          });
          return;
        }
        case "add": {
          let listAdd = [];
          this.creativeInfo.map((item) => {
            listAdd.push(item.id);
          });
          let dataAdd = {
            offerId: this.dataList.offerId,
            creativeId: listAdd.join(","),
            auditorId: this.auditCreative === 1 ? "" : this.inside,
          };
          if (this.auditCreative === 0 && this.inside === "") {
            this.$message({
              type: "success",
              message: "请选择内部审核人!",
            });
            return;
          }

          this.btnDisable = true;
          examine(dataAdd).then((res) => {
            if (res.data.success) {
              let result = res.data.data;
              if (result != null && result.offer.auditCreative === 1 && this.userInfo.is_agency === 1 && (!result.offer.originOfferId || result.offer.originOfferId == -1)) {
                if (this.waterUrlDisabledNameList().length > 0) {
                  this.btnDisable = false;
                  this.$message({
                    type: "success",
                    message: "提交成功，但审核素材准备中，请在10分钟后拷贝审核链接！",
                  });
                  this.close();
                } else {
                  this.openCopyDialog(result.creativeAudit.id);
                }
              } else {
                this.btnDisable = false;
                this.$message({
                  type: "success",
                  message: "提交成功",
                });
                this.close();
              }
            }
          }, (error) => {
            if (error) {
              this.btnDisable = false
            }
          });
          return;
        }

        case "examine": {
          let success = true;
          for (let i in this.creativeInfo) {
            if (
              this.creativeInfo[i].status != 2 &&
              this.creativeInfo[i].status != 3
            ) {
              this.$message({
                type: "error",
                message: "请审核素材!",
              });
              let ele = document.querySelector('div[examineId="' + this.creativeInfo[i].id + '"].creative_item');
              if (ele != null) {
                ele.scrollIntoView();
              }
              return;
            }
          }
          if (success) {
            let dataExamine = {
              listId: this.dataList.listId,
              creativeInfo: this.creativeInfo,
            };
            this.btnDisable = true;
            examineSubmit(dataExamine).then((res) => {
              if (res.data.success) {
                this.btnDisable = false;
                this.$message({
                  type: "success",
                  message: "提交成功",
                });
                this.close();
              }
            }, (error) => {
              if (error) {
                this.btnDisable = false
              }
            });
          }
          return;
        }
      }
    },

    /**
     * 复制链接
     */
    getRealUrl(url) {
      if (url == null) {
        return url;
      }
      let loc = window.location;
      let realUrl = url;
      if (realUrl.indexOf("//") > 0) {
        let hostStart = realUrl.indexOf("//") + 2;
        let hostEnd = realUrl.indexOf("/", hostStart);
        if (hostStart >= 7 && hostEnd > hostStart) {
          realUrl = loc.protocol + "//" + loc.host + realUrl.substring(hostEnd);
        }
      }
      return realUrl;
    },
    openCopyDialog(creativeAuditId) {
      copyLink(creativeAuditId).then(res => {
        if (res.data.code === 200) {
          if (res.data.success === true) {
            this.copyKeyUrl = this.getRealUrl(res.data.data.keyLink)
            this.copyDialog = true
            return;
          }
        }
        this.btnDisable = false;
        this.$message({
          type: "success",
          message: "提交成功",
        });
        this.close();
      }).catch((/* error */) => {
        //该提示针对examine而言
        this.btnDisable = false;
        this.$message({
          type: "success",
          message: "提交成功",
        });
        this.close();
      })
    },
    copy() {
      var input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = this.copyKeyUrl;
      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('复制成功!')
      //移除input标签
      document.body.removeChild(input)

      setTimeout(() => {
        if (this.copyDialog) {
          this.closeCopyDialog();
        }
      }, 2000);
    },
    closeCopyDialog() {
      this.copyDialog = false;
      this.close();
    },

  },
};
</script>
<style lang="scss">
.detail_form_item {
  margin-top: 5px;
  padding-left: 10%;
}

.detailRow {
  margin-top: 20px;
  max-height: 550px;
  overflow-y: auto;
}

.create-url {
  width: 82%;
  height: 175px;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #f0f2f5;
  background-color: #f0f2f5;
  border-radius: 9px;
}

.creative_border {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.creative_item {
  width: 48%;
  border: 2px solid #f0f2f5;
  background-color: #f0f2f5;
  border-radius: 9px;
  margin-top: 20px;
}

.create-detail {
  width: 82%;
  margin: 10px auto;
}

.basicInfo_table_title {
  height: 26px;
  line-height: 26px;
  border: 1px solid #ebeef5;
  background-color: #fafafa;
  font-weight: 600;
}

.basicInfo_table_column {
  height: 26px;
  line-height: 26px;
  border: 1px solid #ebeef5;
}
</style>
